﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

    <script type="text/javascript" src="js/prototype.js"></script>

    <script>
		
		    Kioskvalt = {};
		    Kioskvalt.ImageKnob = Class.create( {
		    
		        initialize: function( el, opts )
		        {
		            this.element = $(el);
		            
		            this.def = {    
		                image: '',
		                imagecount: 1,
		                imagewidth: 32,
		                imageheight: 32,
		                imagex: 0,
		                imagey: 0,
		                minimum: 0,
		                value: 50,
		                maximum: 100
		            };
		            
		            this.options = Object.extend( this.def, opts || {} );
		            
		            this.grabbed = false;
		            this.grabx = 0;
		            this.graby = 0;
		            this.grabdeltavalue = 0.0;
		            
		            this.innervalue = 0.0;
		            
		            this.element.style.display = 'block';
		            this.element.style.width = this.options.imagewidth+'px';
		            this.element.style.height = this.options.imageheight+'px';
		            this.element.style.overflow = 'hidden';
		            this.element.style.position = 'relative';
		            
		            this.imageelement = document.createElement( 'img' );
		            this.imageelement.src = this.options.image;
		            this.imageelement.style.display = 'block';
		            this.imageelement.style.left = '0px';
		            this.imageelement.style.top = '0px';
		            this.imageelement.style.position = 'absolute';
		            this.element.appendChild( this.imageelement );
		            
		            Event.observe( this.element, 'mousedown', this.onMouseDown.bindAsEventListener( this ), false );
		            
		            this.setValue( this.options.value );		            
		        },
		        
		        _convertInnerValue: function( vv )
		        {
		            var v = this.options.minimum + (vv * (this.options.maximum - this.options.minimum));
		            return v;
		        },
		        
		        getValue: function()
		        {
		            var v = this.options.minimum + (this.innervalue * (this.options.maximum - this.options.minimum));
		            return v;
		        },
		        
		        setValue: function( v )
		        {
		            this.innervalue = (v - this.options.minimum) / (this.options.maximum - this.options.minimum);;
		            this.updateDisplay();
		        },
		        
		        updateDisplay: function()
		        {
		            var vv = this.innervalue;
		            if( this.grabbed )
		                vv += this.grabvaluedelta; 
		            if( vv < 0.0 )
		                vv = 0.0;
		            if( vv > 1.0 )
		                vv = 1.0;

		            var imgidx = Math.round( vv * (this.options.imagecount) );
		            imgidx %= this.options.imagecount;

		            var imgx = -(this.options.imagex + (this.options.imagewidth * imgidx));
		            var imgy = -this.options.imagey;
		            
		            this.imageelement.style.left = imgx + 'px';
		            this.imageelement.style.top = imgy + 'px';

		            var val = this._convertInnerValue( vv );
		            this.imageelement.alt = val.toString();
		            this.imageelement.title = val.toString();
		         },
		        
		        onMouseDown: function( evt )
		        {   
    		        this.grabbed = true;
		            this.grabx = Event.pointerX( evt );
		            this.graby = Event.pointerY( evt );
		            this.grabvaluedelta = 0.0;
		            
		            Event.stop( evt );
		            
		            this.eventhandler1 = this.onMouseUp.bindAsEventListener( this );
		            this.eventhandler2 = this.onMouseMove.bindAsEventListener( this );

		            Event.observe( this.element, 'mouseup', this.eventhandler1, true );
		            Event.observe( this.element, 'mousemove', this.eventhandler2, true );
		            
		        },
		        
		        onMouseMove: function( evt )
		        {
		            var dx = Event.pointerX( evt ) - this.grabx;
		            var dy = -(Event.pointerY( evt ) - this.graby);
		            Event.stop( evt );
		            
		            this.grabvaluedelta = (dx + dy) / 200.0;
		            
		            this.updateDisplay();
		        },
		        
		        onMouseUp: function( evt )
		        { 
		            Event.stopObserving( this.element, 'mouseup', this.eventhandler1, true ); 
		            Event.stopObserving( this.element, 'mousemove', this.eventhandler2, true );
		            
		            Event.stop( evt );
		            
		            var vv = this.innervalue;
		            if( this.grabbed )
		                vv += this.grabvaluedelta; 
		            if( vv < 0.0 )
		                vv = 0.0;
		            if( vv > 1.0 )
		                vv = 1.0;
		            this.innervalue = vv;
		                 
		            this.grabbed = false;
		            this.updateDisplay(); 
		        } 		        
		        
		    } );
		    
		
    </script>

    <style type="text/css">
        .knob
        {
            background-color: #faf;
        }
    </style>
</head>
<body>
    <h1>
        test</h1>
    <hr />
    <p>
        37x50 knob, 32 images (1200x50) slightly off :)</p>
    <div class="knob" id="knob1">
    </div>
    <p>
        knob, 32 images (2400x100) huge though, just testing... 2400x100x32 PNGs arent small</p>
    <div class="knob" id="knob2">
    </div>
    <hr />

    <script>
	
	new Kioskvalt.ImageKnob( 'knob1', { image:'img/knobs1.png', imagewidth:37, imageheight:50, imagecount:32 } );
	new Kioskvalt.ImageKnob( 'knob2', { image:'img/knobs2.png', imagewidth:75, imageheight:100, imagecount:32 } );
	 
    </script>

</body>
</html>
